Ocknamo.com

HomeWorks黄金虫ブログ
HomeWorksBLOG

npmでvue.jsのHallo world !

Posted: 2018-06-13

Hero image

公式 Document 読んでてちょっと分かりづらかったので個人的なメモです。 npm については省略。

npm install

mkdir npm-vue-study cd npm-vue-study npm install vue

中身

touch index.html index.html の中身

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="index.js"></script>

touch index.js index.js の中身

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

参考: https://jsfiddle.net/chrisvfritz/50wL7mdz/

/vue/dist 以下にビルドのバラエティが色々おいてあるので必要なもの html で呼び出す。 さまざまなビルドについて

Screenshot from 2018 06 13 23 07 43 300x125

追記 上の JS だとコンソールで app.message の値を変えても変わんないので以下に変更。 var app = new Vue({ el: #app, data: { message: 'Hello Vue.js!' } })